<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      title="解绑归档目录"
      @register="register"
      @ok="handleSubmit"
      @cancel="handleCancel"
      :destroyOnClose="true"
      :minHeight="400"
      :width="500"
    >
      <BasicTable @register="registerTable"
    /></BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import {
    getDirectoryLevel,
    UnbindAchieveDirectory,
    RestoreAbolishedDoc,
  } from '/@/api/demo/document';
  import { getDirectoryColumns } from './tableData';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emit = defineEmits(['register', 'success']);
  const folderId = ref<any>(null);
  const { createMessage } = useMessage();
  const comType = ref<string>('');

  // 定义提交事件
  const handleSubmit = () => {
    if (comType.value === '解绑') {
      const targetFolderId = Number(getSelectRowKeys()[0]);
      UnbindAchieveDirectory(folderId.value, targetFolderId).then((res) => {
        if (res) {
          emit('success');
          createMessage.success('解绑成功');
        }
      });
      handleCancel();
    } else if (comType.value === '废止还原') {
      const targetFolderId = getSelectRowKeys()[0];
      RestoreAbolishedDoc(folderId.value, targetFolderId).then((res) => {
        if (res) {
          emit('success');
          createMessage.success('还原成功');
        }
      });
      handleCancel();
    }
  };

  // 定义取消事件
  const handleCancel = () => {
    closeModal();
  };

  // 定义弹窗是否可见
  const [register, { closeModal }] = useModalInner((data) => {
    comType.value = data.type;
    folderId.value = data.treeKey;
  });

  // 表格初始化
  const [registerTable, { getSelectRowKeys }] = useTable({
    api: () => getDirectoryLevel(0),
    rowKey: 'key',
    columns: getDirectoryColumns(),
    bordered: true,
    isTreeTable: true,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    scroll: { y: 300 },
    rowSelection: { type: 'radio' },
  });
</script>
